import { register } from '@/services/demo/register';
import { smsCaptcha } from '@/services/demo/smsCaptcha';
import {
  LockOutlined,
  MailOutlined,
  SafetyCertificateOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Button, Col, Form, Input, message, Row } from 'antd';
import './index.less';

const RegistrationForm = () => {
  const [form] = Form.useForm();

  const onFinish = async (values) => {
    console.log('Form values:', values);
    try {
      const res = await register(
          values.userName,
          values.email,
          values.password,
          values.checkPassword,
          values.emailCode
      );
      if (res.code===0) {

        console.log('register successful:', res);
        window.location.href = '/table';
        // 处理注册成功后的逻辑，比如跳转页面等
      } else {
        console.log('register failed');
      }
    } catch (error) {
      console.error('register failed:', error);
      // 处理注册失败的逻辑
    }
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  // 邮箱验证码
  const code1 = async () => {
    const email = form.getFieldValue('email');
    if (!email) {
      message.error('请输入邮箱!');
      return;
    }

    console.log('Email:', email);
    try {
      const res = await smsCaptcha(email);
      if (res.code===0) {
        // 处理发送成功后的逻辑
        console.log('发送成功', res);
        message.success('验证码已发送成功！');
      } else {
        console.log('发送失败');
        message.error('验证码发送失败！');
      }
    } catch (error) {
      console.error('发送失败', error);
      // 处理失败的逻辑
    }
  };

  return (
      <div className="box1">
        <Form
            form={form}
            name="registration_form"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            style={{ maxWidth: 400 }}
        >
          <h1 style={{ marginLeft: 155 }}>注册</h1>
          <div style={{ marginTop: 10, marginLeft: 40, marginRight: 40 }}>
            <Form.Item
                name="userName"
                rules={[{ required: true, message: '请输入用户名!' }]}
            >
              <Input prefix={<UserOutlined />} placeholder="用户名" />
            </Form.Item>

            <Form.Item
                name="email"
                rules={[
                  { required: true, message: '请输入邮箱地址!' },
                  { type: 'email', message: '请输入有效的邮箱地址!' },
                ]}
            >
              <Input prefix={<MailOutlined />} placeholder="邮箱" />
            </Form.Item>

            <Form.Item
                name="password"
                rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input.Password prefix={<LockOutlined />} placeholder="密码" />
            </Form.Item>

            <Form.Item
                name="checkPassword"
                dependencies={['password']}
                hasFeedback
                rules={[
                  { required: true, message: '请确认密码!' },
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                      if (!value || getFieldValue('password') === value) {
                        return Promise.resolve();
                      }
                      return Promise.reject(new Error('两次输入的密码不一致!'));
                    },
                  }),
                ]}
            >
              <Input.Password prefix={<LockOutlined />} placeholder="确认密码" />
            </Form.Item>

            <Form.Item
                name="emailCode"
                rules={[{ required: true, message: '请输入邮箱验证码!' }]}
            >
              <Row gutter={8}>
                <Col span={16}>
                  <Input
                      prefix={<SafetyCertificateOutlined />}
                      placeholder="邮箱验证码"
                  />
                </Col>
                <Col span={8}>
                  <Button onClick={code1}>获取验证码</Button>
                </Col>
              </Row>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
                注册
              </Button>
            </Form.Item>
          </div>
        </Form>
      </div>
  );
};

export default RegistrationForm;
